<template>
  <div class="solution-container">
    <el-select v-model="selectedProblemId" placeholder="选择题目" @change="handleProblemChange" class="problem-select">
      <el-option 
        v-for="item in problemList" 
        :key="item.id" 
        :label="item.title" 
        :value="item.id"
      />
    </el-select>
    <h2>{{ problem.title }}</h2>
    <div class="problem-content">
      <p>{{ problem.content }}</p>
    </div>
    
    <div class="solution-editor">
      <el-select v-model="language" placeholder="选择编程语言" class="language-select">
        <el-option label="JavaScript" value="javascript" />
        <el-option label="Python" value="python" />
        <el-option label="Java" value="java" />
        <el-option label="C++" value="cpp" />
        <el-option label="C" value="c" />
      </el-select>
      
      <el-input 
        v-model="solution" 
        type="textarea" 
        :rows="10" 
        placeholder="在这里编写你的题解..."
      />
    </div>
    
    <div class="action-buttons">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { 
  getProblemSolutionService,
  addSolutionService,
  updateSolutionService,
  getProblemListService
} from '@/api/problem';
import { ElMessage } from 'element-plus';

const route = useRoute();
const problemId = route.params.id;
const loading = ref(false);

const problem = ref({});
const problemList = ref([]);
const selectedProblemId = ref('');


// 获取题目和题解数据
onMounted(async () => {
  try {
    loading.value = true;
    // 获取题目列表
    const listRes = await getProblemListService();
    problemList.value = listRes.data;
    
    // 设置默认选中的题目
    if (problemList.value.length > 0) {
      selectedProblemId.value = problemId;
    }
    
    const res = await getProblemSolutionService(problemId);
    problem.value = res.data.problem;
    if (res.data.solution) {
      solution.value = res.data.solution.content;
      language.value = res.data.solution.language;
    }
  } catch (error) {
    ElMessage.error('获取题解失败');
  } finally {
    loading.value = false;
  }
});



const handleSave = async () => {
  try {
    loading.value = true;
    const solutionData = {
      problemId,
      language: language.value,
      content: solution.value
    };
    
    // 根据是否有solutionId判断是新增还是更新
    if (solution.value.id) {
      await updateSolutionService({
        ...solutionData,
        id: solution.value.id
      });
    } else {
      await addSolutionService(solutionData);
    }
    
    ElMessage.success('保存成功');
  } catch (error) {
    ElMessage.error('保存失败');
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  // 取消编辑逻辑
  solution.value = '';
  ElMessage.info('已取消编辑');
};

// 处理题目切换
const handleProblemChange = async (newProblemId) => {
  try {
    loading.value = true;
    const res = await getProblemSolutionService(newProblemId);
    problem.value = res.data.problem;
    if (res.data.solution) {
      solution.value = res.data.solution.content;
      language.value = res.data.solution.language;
    } else {
      solution.value = '';
      language.value = '';
    }
  } catch (error) {
    ElMessage.error('获取题解失败');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.solution-container {
  padding: 20px;
}

.problem-content {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.solution-editor {
  margin: 20px 0;
}

.problem-select {
  margin-bottom: 20px;
  width: 100%;
}

.language-select {
  margin-bottom: 10px;
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}
</style>